﻿<template>
  <el-container>
    <el-header>
      <div class="left-panel">
        <el-button
          type="success"
          icon="el-icon-plus"
          @click="opAdd"
        ></el-button>
        <!-- <el-button
          type="primary"
          icon="el-icon-edit"
          @click="opBatchEdit"
        ></el-button> -->
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          @click="opBatchDelete"
        ></el-button>
      </div>
      <div class="right-panel">
        <el-button
          :icon="Search"
           
          type="primary"
          @click="opBindData"
        >
          查询
        </el-button>
        <el-button :icon="Search" type="info" plain @click="resetSearch">
          重置
        </el-button>
        <el-button text type="primary" @click="showCondition = !showCondition">
          <span v-if="!showCondition">展开</span>
          <span v-else>收起</span>
          <vab-icon
            class="vab-dropdown"
            :class="{ 'vab-dropdown-active': fold }"
            icon="arrow-up-s-line"
          />
        </el-button>
      </div>
    </el-header>
    <el-foot v-show="showCondition">
      <vab-query-form-top-panel>
        <el-form
          inline
          label-width="49px"
          :model="queryForm"
          style="margin-top: 5px"
        >
          <el-form-item label="编号" label-width="100px">
            <el-input
              placeholder="---请输入编号---"
              v-model="queryList.Code"
              style="width: 300px" /></el-form-item
          ><el-form-item label="角色名" label-width="100px">
            <el-input
              placeholder="---请输入角色名---"
              v-model="queryList.Name"
              style="width: 300px" /></el-form-item
          ><el-form-item label="状态" label-width="100px">
            <el-select
              placeholder="---请选择状态---"
              v-model="queryList.State"
              style="width: 300px"
            >
              <el-option label="---请选择状态---" value="" />
              <el-option label="正常" value="1" />
              <el-option label="禁用" value="0" /> </el-select
          ></el-form-item>
        </el-form>
      </vab-query-form-top-panel>
    </el-foot>

    <el-main class="nopadding">
      <scTable
        ref="mytable"
        :data="listData"
        :attrList="attrList"
        :valueList="valueList"
        :queryList="queryList"
        :column="columnList"
        :sort-orders="['ascending', 'descending']"
        @selection-change="selectionChange"
        row-key="Code"
        key="Code"
        stripe
        show-summary
        remoteSummary
      >
        <el-table-column type="selection" width="50"></el-table-column>
        <el-table-column label="序号" prop="rownumber" width="50" fixed="left">
        </el-table-column>

        <el-table-column label="操作" fixed="right" align="right" width="230">
          <template #default="scope">
            <el-button-group>
              <el-button
                text
                type="primary"
                size="small"
                @click="opShow(scope.row, scope.$index)"
                >查看</el-button
              >
              <el-button
                text
                type="primary"
                size="small"
                @click="opEdit(scope.row, scope.$index)"
                >编辑</el-button
              >
              <el-popconfirm
                title="确定删除吗？"
                @confirm="opDelete(scope.row, scope.$index)"
              >
                <template #reference>
                  <el-button text type="primary" size="small">删除</el-button>
                </template>
              </el-popconfirm>
              <el-button
                text
                type="primary"
                size="small"
                @click="opPurview(scope.row,'0', scope.$index)"
                >后台权限</el-button
              >
              <el-button
                text
                type="primary"
                size="small"
                @click="opPurview(scope.row,'1', scope.$index)"
                >手机服务员权限</el-button
              >
              <el-button
                text
                type="primary"
                size="small"
                @click="opPurview(scope.row,'2', scope.$index)"
                >电脑点单权限</el-button
              >
            </el-button-group>
          </template>
        </el-table-column>
      </scTable>
    </el-main>
  </el-container>

  <save-dialog
    ref="saveDialog"
    @fatherMethod="opBindData"
    @success="handleSaveSuccess"
    @closed="dialogSave = false"
  ></save-dialog>

  <purview-dialog
    v-if="dialogPurview"
    ref="purviewDialog"
    @success="handleSaveSuccess"
    @closed="dialogPurview = false"
  ></purview-dialog>
</template>

<script>
import saveDialog from "./save";
import purviewDialog from "./purview";
import publicjs from "@/api/model/publicjs";
export default {
  name: "role",
  components: {
    saveDialog,
    purviewDialog,
    publicjs,
  },
  data() {
    return {
      dialogSave: false,
      dialogPurview: false,
      showCondition: false,
      selectionRows: [],
      pkList: ["Code"],
      columnList: [
        {
          label: "编号",
          prop: "Code",
          width: "150",
          sortable: true,
          hide: false,
          fixed: false,
        },
        {
          label: "角色名",
          prop: "Name",
          width: "200",
          sortable: true,
          hide: false,
          fixed: false,
        },
        {
          label: "说明",
          prop: "Remark",
          width: "400",
          sortable: true,
          hide: false,
          fixed: false,
        },
        {
          label: "状态",
          prop: "State",
          width: "100",
          sortable: true,
          hide: false,
          fixed: false,
        },
      ],
      attrList: {
        Name: "Role",
        UseDistinct: false,
        OrgCode: "",
        UseBackUp: false,
        UseGroup: false,
      },
      valueList: {
        Code: "Code",
        Name: "Name",
        Remark: "Remark",
        State: "State",
      },
      queryList: { Code: "", Name: "", State: "" },
      result: "", // 运行结果
      props1: {
        checkStrictly: true,
        emitPath: false,
      },
      optionsState: [],
    };
  },
  methods: {
    //添加
    opAdd() {
      this.dialogSave = true;
      this.$nextTick(() => {
        this.$refs.saveDialog.open();
      });
    },
    //编辑
    opEdit(row) {
      this.dialogSave = true;
      this.$nextTick(() => {
        this.$refs.saveDialog.open("Edit").setData(row);
      });
    },
    //编辑
    opBatchEdit() {
      this.$router.push({
        path: "/()/batch",
      });
    },
    //查看
    opShow(row) {
      this.dialogSave = true;
      this.$nextTick(() => {
        this.$refs.saveDialog.open("Show").setData(row);
      });
    },
    opPurview(row,type) {
      this.dialogPurview = true;
      this.$nextTick(() => {
        this.$refs.purviewDialog.open("Purview",type).setData(row);
      });
    },
    //删除
    async opDelete(row) {
      // eslint-disable-next-line no-undef, no-debugger
      //debugger;
      var head = new publicjs.head();
      publicjs.initHead(head, "save");
      var ed = new publicjs.entitydata(head);
      var eo = new publicjs.entityobj();
      eo.AttrList = {
        Name: "Role",
        DoType: "Delete",
        UseDistinct: false,
        OrgCode: "",
        UseBackUp: false,
        UseGroup: false,
      };
      eo.ValueList = {};
      this.pkList.forEach((element) => {
        // eslint-disable-next-line no-undef, no-debugger
        //debugger;
        eo.ValueList[element] = row[element];
      });
      ed.Data.Content.ObjectList.Object.push(eo);
      try {
        var returnValueStr = await this.$API.auth.objProcess.post(ed);
        let returnValue = JSON.parse(returnValueStr);
        if (returnValue.Result.OpFlag == "1") {
          this.$refs.mytable.getData();
          this.$message.success("删除成功");
        } else {
          this.$message.error("操作失败:" + returnValue.Result.OpMsg);
        }
      } catch (error) {
        this.loading = false;
        this.$alert(error.message, "提示", { type: "error" });
        return false;
      }
    },
    //批量删除
    async opBatchDelete() {
      // eslint-disable-next-line no-debugger
      //debugger;
      this.$confirm(
        `确定删除选中的 ${this.selectionRows.length} 项吗？`,
        "提示",
        {
          type: "warning",
        }
      )
        .then(async () => {
          var head = new publicjs.head();
          publicjs.initHead(head, "save");
          var ed = new publicjs.entitydata(head);
          this.selectionRows.forEach((element) => {
            var eo = new publicjs.entityobj();
            eo.AttrList = {
              Name: "Role",
              DoType: "Delete",
              UseDistinct: false,
              OrgCode: "",
              UseBackUp: false,
              UseGroup: false,
            };
            eo.ValueList = {};
            this.pkList.forEach((pkstr) => {
              // eslint-disable-next-line no-undef, no-debugger
              //debugger;
              eo.ValueList[pkstr] = element[pkstr];
            });
            ed.Data.Content.ObjectList.Object.push(eo);
          });

          try {
            var returnValueStr = await this.$API.auth.objProcess.post(ed);
            let returnValue = JSON.parse(returnValueStr);
            if (returnValue.Result.OpFlag == "1") {
              this.$refs.mytable.getData();
              this.$message.success("删除成功");
            } else {
              this.$message.error("操作失败:" + returnValue.Result.OpMsg);
            }
          } catch (error) {
            this.loading = false;
            this.$alert(error.message, "提示", { type: "error" });
            return false;
          }
        })
        .catch(() => {});
    },
    //表格选择后回调事件
    selectionChange(selection) {
      // eslint-disable-next-line no-debugger
      //debugger;
      this.selectionRows = selection;
    },

    //本地更新数据
    handleSaveSuccess(data, mode) {
      if (mode == "Add") {
        this.$refs.mytable.refresh();
      } else if (mode == "Edit") {
        this.$refs.mytable.refresh();
      }
    },
    async opBindData() {
      this.$refs.mytable.clearSort();
      this.$refs.mytable.getData();
    },
    resetSearch() {
      this.queryList.Code = "";
      this.queryList.Name = "";
      this.queryList.State = "";
    },
  },
  mounted() {
    this.opBindData();
  },
};
</script>
